<template>
  <div @click="changeChildrenVisiable" :class="{ selectItemContentDark: getSetValue('base')('darkTheme') }"
    class="selectItemContent">
    <div class="selectItemLeft">{{ item.label }}</div>
    <div class="selectItemRight">
      <n-icon v-if="isHasChildren" class="expandIcon">
        <ExpandMoreFilled />
      </n-icon>
    </div>
  </div>
  <div v-if="childrenVisiable && isHasChildren" class="children">
    <c-select v-if="item.children!?.value.length > 0" :options="item.children!.value"></c-select>
    <c-select v-if="item.children!?.length > 0" :options="item.children!"></c-select>
  </div>
</template>

<script setup lang='ts'>
import CSelect from "./index.vue";
import { ExpandMoreFilled } from "@vicons/material";
const { getSetValue } = chatSettingStore()
const props = defineProps<{
  item: SelectOptions;
}>();
const { item } = toRefs(props)
const childrenVisiable = ref(false)
const isHasChildren = computed(() => {
  return item.value.children!?.length > 0 || item.value.children!?.value.length > 0
})
const changeChildrenVisiable = () => {
  childrenVisiable.value = !childrenVisiable.value
}
</script>

<style lang="scss" scoped>
.expandIcon {
  rotate: -90deg;
}

.children {
  position: absolute;
  left: 106%;
  top: -6px;
  width: max-content;
  height: max-content;
}

.selectItemContentDark {
  &:hover {
    background: rgba(255, 255, 255, 0.08);
    height: 28px;
    cursor: pointer;
  }
}

.selectItemContent {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: 4px;
  padding: 4px 6px;


  &:hover {
    background: rgba(255, 255, 255, 1);
    height: 28px;
    cursor: pointer;
  }
}

.selectItemRight {
  display: flex;
  align-items: center;
  margin-left: 10px;
}
</style>